<template>
	<view :class="['model', { act: show }]">
		<view class="main">
			<!-- 键盘 -->
			<view class="text-center padding text-df title flex align-center justify-center"><image class="margin-right-xs" src="/static/verify.png"></image>
			<block v-if="!verify">请输入支付密码</block>
			<block v-else>请输入验证码</block>
			</view>
			<view class='keyboard'>
				<view class='left number'>
					<view v-for="(i, o) in key.code.length" :key="o">
						<view v-for="(m, idx) in key.code[o]" :key="idx" hover-class='active' :hover-stay-time='100' @click="InputPwd(m)">{{ m }}</view>
					</view>
				</view>
				<view class='right ctr-btn'>
					<view v-for="(c, idx) in key.control" :key="idx" class='ctr-btn-item' hover-class='active' :hover-stay-time='100' @click="control(c)">
						<image :src="idx ? '/static/keyboard.png' : '/static/backspace.png'"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'keyboard',
		props: {
			show: {
				type: Boolean
			},
			verify: { // 验证码
				type: String,
				default: '' 
			}
		},
		data() {
			return {
			 key: {
			 	code: [[1,2,3],[4,5,6],[7,8,9],['x',0,'.',]],
			 	control: [0, 1]
			 }	
			}
		},
		methods: {
			control (event) {
				switch (event) {
					case 0:
					this.$emit('on-del')
					break
					case 1:
					this.$emit('on-close')
					break
				}
			},
			InputPwd (key) {
				this.$emit('on-key', key)
			}
		}
	}
</script>

<style lang="less">
@import '../common/styles/variables.less';	
	.model {
		position: fixed;
		width: 100%;
		bottom:0;
		left: 0;
		display: flex;
		align-items: flex-end;
		z-index: 4;
		transition: transform .2s cubic-bezier(.09,1.1,.71,1.31);
		will-change: transform;
		contain: layout;
		z-index: 777;
		transform: translate3d(0, 100%, 0);
		&.act {
			transform: translate3d(0, 0, 0);
		}
		.main {
			position: relative;
			z-index: 99;
			background:white;
			width: 100%;
			.title {
				image {
					width: 40upx;
					height: 40upx;
				}
			}
			.keyboard {
				width: 100%;
				display: flex;
				background-color: #fff;
				border-top: 1px solid #f3f3f3;
				box-shadow: 0px 2px 7px 0 #f3f3f3;
				.number {
					display: flex;
					flex: 1;
					flex-decration: column;
					flex-flow:column;
					border-right:1px solid #f3f3f3;
					box-sizing: border-box;
					view {
						flex: 1;
						display: flex;
						& > view {
							flex: 1;
							align-items: center;
							justify-content: center;
							border-bottom:1px solid #f3f3f3;
							border-right:1px solid #f3f3f3;
							box-sizing: border-box;
							font-size:@title;
							color:black;
							&:nth-of-type(3n) {
								border-right: 0
							}
						}
						&:last-of-type{
							& > view {
								border-bottom: 0;
							}
						}
						
					}
				}
				.ctr-btn {
					width: 180upx;
					view {
						height: 240upx;
						line-height: 240upx;
						text-align: center;
						box-sizing: border-box;
						border-bottom: 1px solid #f3f3f3;
						image {
							width: 50upx;
							height: 50upx;
						}
					}
				}
				.active { background-color: #f3f3f3; }
			}
		}
	}
</style>
